<template>
	<view class="class_container">
		<!-- 左侧滚动类型选择 -->
		<view class="left_scroll">
			<scroll-view scroll-y="true" class="scroll_left_box">
				<view class="class_item" 
					v-for="(item, index) of classD" 
					:key="index"
					:class="{'notFirstClass': index != 0, 'activeClass': activeClassD.itemName == item.itemName}"
					@click="switchClassHandle(item)"
					>
					{{ item.itemName }}
				</view>
			</scroll-view>
		</view>
		<!-- 右侧类型内容展示 -->
		<view class="right_content">
			<view class="class_name">
				{{ activeClassD.itemName }}
			</view>
			<!-- 分类项 -->
			<view class="class_content">
				<view class="class_content_item" 
					v-for="(item, index) of activeClassD.chidrens" 
					:key="index"
					@click="gotoGoodsList(item)"
					>
					<view class="class_content_item_picture">
						<img class="class_content_item_picture_img" :src="baseUrl + item.picture" alt="">
					</view>
					<view class="class_content_item_name">
						{{ item.itemName }}
					</view>
				</view>
			</view>
			
			<!-- 空数据提示 -->
			<view class="empty_tips" v-if="emptyFlag">
				暂无数据!
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from '@dcloudio/uni-app';

// 分类数据
let classD = ref([]);
// 激活的分类数据
let activeClassD = ref({});
// 图片基础路径
let baseUrl = uni.$baseUrl
// 空数据标识
let emptyFlag = ref(false);

onMounted(()=>{
	getPageInit();
})

onShow(()=>{
	uni.$loadCarBadge();
})

// 切换分类
function switchClassHandle(item){
	activeClassD.value = item;
	
	// 切换空提示标识状态
	if(activeClassD.value.chidrens.length == 0){
		emptyFlag.value = true;
		return 1;
	}
	emptyFlag.value = false;
}

// 获取页面节点内容初始化
async function getPageInit(){
	const res = await uni.$http.get("/pageElements/getByPosition/classify");
	classD.value = res.data.data;
	// 赋予默认激活的分类
	activeClassD.value = classD.value[0];
	
}

// 跳转到商品列表页面
function gotoGoodsList(item){
	uni.navigateTo({
		url:`/subPkg1/goods_list/goods_list?navText=${item.itemName}&type=search`
	})
}

</script>

<style lang="scss">
.class_container{
	display: flex;
	position: relative;
}


.left_scroll{
	width: 25%;
}

.scroll_left_box{
	height: 100vh;
}

.right_content{
	width: 80%;
	background-color: #fff;
}

.class_item{
	text-align: center;
	padding: 30rpx 10rpx;
	margin-left: 4rpx;
	font-size: 15px;
	color: #3e3e3e;
	// border: solid red 1px;
}

.notFirstClass{
	// margin-top: 30rpx;
}

.activeClass{
	color: red;
	background-color: #fff;
	font-weight: 600;
}

.class_name{
	padding: 20rpx;
	font-weight: 600;
}

.class_content{
	// border: solid red 1px;
	padding-left: 20rpx;
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
}

.class_content_item{
	// border: solid blue 1px;
	margin-top: 25rpx;
	width: 33%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size: 14px;
}

.class_content_item_picture_img{
	width: 80px;
	height: 80px;
}

.empty_tips{
	font-size: 14px;
	color: #414141;
	padding: 20rpx;
}
</style>
